<template>
  <div class="addCollectData">
    <!-- Field 输入框组件 输入添加信息 -->
    <van-cell-group>
      <!-- Cell 单元格组件 显示时间 -->
      <van-cell title="目标时间" :value=date is-link @click="show=true" />
      <van-field v-model.trim="title" label="目标标题" placeholder="请输入目标标题" />
      <van-field v-model="money" type="number" label="目标金额" placeholder="请输入目标金额" />
      <van-field
        v-model.trim="message"
        rows="2"
        autosize
        label="备注"
        type="textarea"
        maxlength="50"
        placeholder="请输入备注"
        show-word-limit
      />
    </van-cell-group>
    <!-- Popup 弹出层组件 控制时间选择组件的弹出 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '38%' }">
      <!-- DatetimePicker 时间选择组件 选择时间 -->
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="handleSure"
        @cancel="show = false"
      />
    </van-popup>
    <!-- Button 按钮组件 点击保存 -->
    <van-button
      type="primary"
      block
      color="#1989fa"
      @click="handleSave"
    >
      保存
    </van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  name: 'addCollectData',
  /**
   * title  标题
   * money 金额
   * message 备注
   * maxDate 时间选择最大日期
   * currentDate 打开时间选择组件时显示的日期， 默认为今日
   * show 时间选择组件的状态，默认为隐藏
   * date 选择的时间，默认为选择时间
   */
  data () {
    return {
      title: '',
      money: '',
      message: '',
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      show: false,
      date: '选择时间',
    }
  },
  methods: {
    // 选择时间时点击确认
    handleSure (time) {
      // 显示选中的时间
      this.date = time.toLocaleDateString()
      // 关闭时间选择组件
      this.show = false
    },
    // 点击保存时
    handleSave () {
      // 没有选择时间时停止
      if (this.date === '选择时间') {
        Toast.fail('请选择\n目标时间')
        return
      }
      // 没有输入标题时停止
      if (!this.title) {
        Toast.fail('请输入\n目标标题')
        return
      }
      // 没有输入金额时停止
      if (!this.money) {
        Toast.fail('请输入\n目标金额')
        return
      }
      // 输入金额格式错误时停止
      const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      if (!reg.test(this.money)) {
        Toast.fail('金额格式\n不正确')
        return
      }
      // vuex 保存数据
      this.$store.commit('handleAddCollectData', {
        date: this.date,
        title: this.title,
        money: Number(this.money).toFixed(2),
        message: this.message,
      })
      // 提示添加成功
      Toast.success({
        message: '添加成功',
        forbidClick: true,
      })
      // 1 秒之后跳转到明细页面，提升用户体验
      setTimeout(() => {
        this.$router.push({
          name: 'collect',
        })
      }, 1000)
    },
  },
}
</script>

<style lang="less" scoped>
  .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
  .van-uploader{
    margin-left: 38px;
  }
</style>
